<template>
  <TresObject3D ref="mesh" v-bind="$attrs">
    <TresMesh :geometry="geometry" :material="material" />
    <TresMesh
      :geometry="geometry"
      :material="material"
      :rotation-z="Math.PI / 2"
    />
  </TresObject3D>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { use3DEditorStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useTresContext, useRenderLoop } from '@tresjs/core'

const { mouseVector: position, isCreating } = storeToRefs(use3DEditorStore())
const { onLoop } = useRenderLoop()
const mesh = shallowRef<THREE.Object3D>(null)
const geometry = new THREE.BoxGeometry(1.5, 0.15, 0.15)
const material = new THREE.MeshBasicMaterial({ color: '#ccc' })

onLoop(() => {
  if (isCreating.value) {
    mesh.value.position.set(...position.value)
  }
})
</script>
